<template>
	<view class="login-container">
		<view class="logo" >
			<image class="logo-image" src="../../static/images/logo.png" mode="widthFix"></image>
		</view>

		<view class="login-input">
			<view class="header_div">
				<input class="input-item" type="number"  v-model="buyer.tele" placeholder="手机号" />
				<!-- <view :class="[disabledCode==true?'code_text_tap':'code_text']" :disabled="disabledCode"
					@click="sendSMS()">{{codeText}}</view> -->
			</view>

			<input class="input-item" type="password" v-model="buyer.password" placeholder="密码" />
		</view>
		<button class="login-btn_no" type="default" @click="GetOrderByBuyer">登录查询所有订单</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				disabledCode: false,
				codeText: '获取验证码',
				show: false,
				commodityId: null,
				orderList: [],
				buyer:{
					tele: null,
					password: null,
				},
				token:''  // 存储token
			}
		},
		created() {

			this.getcommodityId();
		},
		methods: {
			/**
			 * 根据url获取商品id
			 */
			getcommodityId() {
				this.commodityId = this.$route.query.id;
			},
			GetOrderByBuyer() {
				 const url = "http://localhost:8090/account/GetOrderByBuyer";
				    uni.request({
				        url: url,
				        method: 'POST',
				        data: {
				            tele: this.buyer.tele,
				            password: this.buyer.password
				        },
				        header: {
				           'content-type': 'application/json'
				        },
				        success: (res) => {
				            if (res.data.code === 1) {
								const token = res.data.data.token; // 获取响应中的token
								// 登录成功后将 token 存储在 localStorage 中
								localStorage.setItem('token', token); // 保存token至localStorage
								this.orderList = res.data.data.orders.map(order => ({
								                    ...order,
								                    token: token  // 确保这里使用从响应获取的token
								                }));
								console.log('请求成功：', res.data.data);
				                
				                console.log(this.orderList);
								// 跳转到订单页面
								this.navigateToOrderPage(this.buyer.tele);
				            } else {
				                // 处理错误情况，例如显示错误消息
				                console.error(res.data.msg);
								uni.showToast({
								    title: res.data.msg || '登录失败，请重试',
								    icon: 'none'
								});
				            }
				        },
				        fail: (err) => {
				           console.error('请求失败：', err);
						   uni.showToast({
				                title: '请求失败',
				                icon: 'none',
				            });
				        }
				 });
			},
			/**
			 * 根据tele查看商品信息
			 */
			navigateToOrderPage(tele) {
				const url = "/pages/orderown/orderown?tele=" + tele;
				uni.navigateTo({
					url: url,
					animationType: 'pop-in',
					animationDuration: 300
				});
			},
			

		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: rgba(245, 245, 245, 1);
	}
	
	.header_div {
		width: 100%;
	}

	.text_div {
		width: 95%;
	}

	.mott_div {
		width: 95%;
		position: fixed;
		bottom: 6px;
	}


	.send_code_div {
		float: left;
		width: 50%;
		background: rgba(255, 255, 255, 1);
	}

	.code_text {
		display: block;
		float: left;
		width: 35%;
		height: 106rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(102, 166, 255, 1);
		background: rgba(255, 255, 255, 1);
		line-height: 106rpx;
	}

	.code_text_tap {
		display: block;
		float: left;
		width: 35%;
		height: 106rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(102, 166, 255, 1);
		background: rgba(255, 255, 255, 1);
		line-height: 106rpx;
		pointer-events: none;
	}

	.login-container {
		width: 100%;
		height: 100%;
		background-image: url('https://web-tlias-mozi.oss-cn-beijing.aliyuncs.com/%E8%83%8C%E6%99%AF2.png'), linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));
		background-size: cover;
		background-blend-mode: lighten;
		background-position: center center;
	}


	.login-input {
		width: calc(100% - 40rpx);
		overflow: hidden;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.phone_input-item {
		display: block;
		width: 53%;
		float: left;
		background: rgba(255, 255, 255, 1);
		border-radius: 4rpx;
		padding: 30rpx 50rpx;
		margin: 0 0 20rpx 0;
		line-height: 44rpx;
	}

	.input-item {
		width: 100%;
		height: 44rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 4rpx;
		padding: 30rpx 50rpx;
		margin: 0 0 20rpx 0;
		line-height: 44rpx;
	}


	.login-btn {
		width: calc(100% - 40rpx);
		height: 100rpx;
		margin: 0 auto;
		background: linear-gradient(136deg, rgba(102, 166, 255, 1) 0%, rgba(65, 136, 255, 1) 100%);
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.login-btn_no {
		width: calc(100% - 40rpx);
		height: 100rpx;
		margin: 0 auto;
		background-color: rgba(60, 156, 255, 1) !important;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.logo {
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		position: relative;
		height: 80rpx;

		.logo-image {
			width: 350rpx;
			position: absolute;
			top: 50%;
			/* 文字顶部距离容器顶部的距离为容器高度的一半 */
			left: 50%;
			/* 文字左侧距离容器左侧的距离为容器宽度的一半 */
			transform: translate(-50%, -20%);
			/* 通过负的50%偏移来实现垂直和水平居中 */
		}
	}
</style>